/*
 * @Author: dingyuwen ding_yuwen@163.com
 * @Date: 2023-02-13 14:56:49
 * @LastEditTime: 2023-08-01 00:01:55
 * @LastEditors: DingYuwen 43669762+DingYuwen@users.noreply.github.com
 * @Description:
 */
import {
  Avatar,
  Button,
  Flex,
  Text,
  useColorModeValue,
} from '@chakra-ui/react';
import { $authToken } from '@tourfly/api';

import { useTranslation } from 'react-i18next';
import { MdLogout } from 'react-icons/md';
import { useNavigate } from 'react-router-dom';

import { removeToken } from '@/common/utils';

import { useAppDispatch, useAppSelector } from '@/store/hooks';
import { reset as resetProfile } from '@/store/profileSlice';
import { logout } from '@/store/user';

export default function User() {
  const { t } = useTranslation();

  const bg = useColorModeValue('gray.100', 'gray.800');
  const logout_bg = useColorModeValue('base.900', 'gray.800');
  const { userInfo } = useAppSelector((state) => state.user);
  const navigate = useNavigate();
  const dispatch = useAppDispatch();

  const handleLogout = () => {
    dispatch(logout());
    removeToken();
    $authToken.set(undefined);
    dispatch(resetProfile());
    navigate('/signin');
  };
  return (
    <Flex direction="column" gap="2" pt="2">
      <Flex
        align="center"
        justify="center"
        w="full"
        gap="4"
        overflow="hidden"
        p="2"
      >
        <Avatar size="md" bg={bg} />
        <Text fontFamily="body">{userInfo.username}</Text>
      </Flex>
      <Button
        bg={logout_bg}
        fontSize="sm"
        fontWeight={400}
        rounded="sm"
        _hover={{ bg: 'base.850' }}
        rightIcon={<MdLogout />}
        onClick={handleLogout}
      >
        {t('profile.logout')}
      </Button>
    </Flex>
  );
}
